import Vue from "vue"
import Vuex from "vuex"
import creatPersistedstate from "vuex-persistedstate"
import { getUserInfoAPI } from "@/api"
Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    token: "",
    userInfo: {}, // 保存用户信息 {id,username,nickname,email,user_pic}
  },
  getters: {
    // username(state) {
    //   return state.userInfo.username
    // }
    // username: (state) => {
    //   return state.userInfo.username
    // }
    nickname: (state) => state.userInfo.nickname, // 昵称
    username: (state) => state.userInfo.username, // 用户名
    user_pic: (state) => state.userInfo.user_pic, // 用户头像
  },
  mutations: {
    // 保存token
    updateToken(state, val) {
      state.token = val
    },
    // 保存用户信息
    updateUserInfo(state, info) {
      state.userInfo = info
    },
  },
  actions: {
    async getUserInfoActions(store) {
      const { data: res } = await getUserInfoAPI()
      if (res.code === 0) {
        store.commit("updateUserInfo", res.data)
      }
    },
  },
  modules: {},
  plugins: [creatPersistedstate()],
  // 本质还是使用同样的web开发常见的几种存储方式，
  // 其特点就是结合了存储方式, 在入口统一配置就不需要每次都手动写存储方法
});
